/* 发送记录
 * @Author: wujie 
 * @Date: 2018-06-12 11:06:22 
 * @Last Modified by: wujie
 * @Last Modified time: 2018-07-02 18:49:08
 */
import React,{ Component } from 'react'
import components from '@/components/index'
import { Row } from 'antd'
import { connect } from 'react-redux'
import actions from '@/actions/sendRecord'
import enumActions from '@/actions/enum'
import util from '@/utils'

const { Card, SendRecordSearch, SendRecordTable } = components

class SendRecord extends Component {

  render(){
    
    const searchProps = util.pick(this.props, [
      'batchId',
      'messageId',
      'operator',
      'startTime',
      'endTime',
      'phone',
      'status',
      'operatorEnum',
      'messageStatusEnum',
    ])

    const tableProps = util.pick(this.props, [
      'pageNum',
      'pageSize',
      'total',
      'loading',
      'operatorEnum',
      'messageStatusEnum',
      'data'
    ])

    const  searchFunProps = util.pick(this, [
      'onChangeBatchId', 
      'onChangeMessageId', 
      'onChangePhone',
      'onChangeOperator',
      'onChangeStatus',
      'onChangeStartTime',
      'onChangeEndTime',
      'onSearch',
    ])
    
    const tableFunProps = util.pick(this, [
      'onChangePagination'
    ])
  
    return (
      <div>
        <Card title="发送记录">
          <Row style={{ padding: 24, backgroundColor: '#fff' }}>
            <SendRecordSearch 
              {...searchProps} 
              {...searchFunProps}
            />
            <SendRecordTable
              {...tableProps}
              {...tableFunProps}
            />
          </Row>
        </Card>
      </div>
    )
  }

  componentDidMount() {
    this.props.getOperatorEnum()
    this.props.getMessageStatusEnum()
    this.props.getData()
  }

  onChangeBatchId = ({target: { value }}) => {
    this.props.setBatchId(value)
  }

  onChangeMessageId = ({ target: { value }}) => {
    this.props.setMessageId(value)
  }

  onChangePhone = ({ target: { value }}) => {
    this.props.setPhone(value)
  }

  onChangeOperator = (value) => {
    this.props.setOperator(value)
  }

  onChangeStatus = (value) => {
    this.props.setStatus(value)
  }

  onChangeStartTime = (value) => {
    this.props.setStartTime(value)
  }

  onChangeEndTime = (value) => {
    this.props.setEndTime(value)
  }

  onSearch = () => {
    this.props.setPageNum(1)
    this.props.getData()
  }

  onChangePagination = (value) => {
    this.props.setPageNum(value)
    this.props.getData()
  }
} 

const mapStateToProps = ({ sendRecordReducer, enumReducer: { operatorEnum, messageStatusEnum } }) => ({ 
  ...sendRecordReducer, 
  operatorEnum,
  messageStatusEnum 
})

const mapDispatchToProps = { ...actions, ...enumActions }

export default connect(mapStateToProps, mapDispatchToProps)(SendRecord)